<template>
  <div class="commonBox">
      <div class="commonTopBox">
          <Topmenu></Topmenu>
      </div>
      <div class="commonContent">
         <div class="commonContentLeft">
             <Leftmenu></Leftmenu>
         </div>
         <div class="commonContentRight" id="commonContentRight">
            <div class="commonContentHtml">
                <!-- 创建 -->
                <div class="creatBox">
                  <div class="commonTitle">列表管理</div>
                  <div class="mainBox">
                      <template>
                        <el-table
                          :data="tableData"
                          border
                          style="width: 100%">
                          <el-table-column
                            prop="poemTitle"
                            label="名字"
                            width="100">
                          </el-table-column>
                          <el-table-column
                            prop="author"
                            label="作者"
                            width="100">
                          </el-table-column>
                          <el-table-column
                            prop="dynasty"
                            label="朝代"
                            width="80">
                          </el-table-column>
                          <el-table-column
                            label="诗词主体">
                                <template  slot-scope="scope">
                                    <div v-for='(item,i) in scope.row.poemArry' :key="i">{{item}}</div>
                                </template>
                          </el-table-column>
                          <el-table-column
                            label="诗词翻译">
                                <template  slot-scope="scope">
                                    <div v-for='(item,i) in scope.row.translation' :key="i">{{item}}</div>
                                </template>
                          </el-table-column>
                          <el-table-column
                            label="tag"
                            width="120">
                                <template  slot-scope="scope">
                                    <div v-for='(item,i) in scope.row.tag' :key="i">{{item}}</div>
                                </template>
                          </el-table-column>
                          <el-table-column
                            label="操作"
                            width="90">
                            <template slot-scope="scope">
                              <el-button type="text" size="small">编辑</el-button>
                              <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </template>
                      
                      <!-- pager-count 页码按钮的数量，当总页数超过该值时会折叠 -->
                      <!-- current-page 当前页数 -->
                      <!-- page-sizes 每页显示个数 -->
                      <!-- total 总条数 -->
                      <div class="pageBox">
                          <el-pagination
                            @current-change="pageChange"
                            :page-count="pageCount"
                            :page-size="pageSize"
                            :current-page="nowPage"
                            layout="prev, pager, next"
                            :total="pageTotal">
                          </el-pagination>
                      </div>
                  </div>
                </div>
            </div>
         </div>
      </div>
  </div>
</template>

<script>
    import Leftmenu from '@/components/Leftmenu.vue'
    import Topmenu from '@/components/Topmenu.vue'

    export default {
      name: 'commonContentRight',
      components: {
        Leftmenu,
        Topmenu
      },
      data(){
        return{
           tableData:[
              {
                  poemTitle:'咏鹅',
                  author:'骆宾王',
                  dynasty:'唐',
                  poemArry:['鹅鹅鹅，曲项向天歌。','白毛浮绿水，红掌拨清波。'],
                  translation:['鹅鹅鹅，面向蓝天，一群鹅儿伸着弯曲的脖子在歌唱。','洁白的羽毛，漂浮在碧绿水面。红红的脚掌，拨动着清清水波。'],
                  tag:['儿童']
              },
              {
                poemTitle:'终南望馀雪',
                author:'祖咏',
                dynasty:'唐',
                poemArry:['终南阴岭秀，积雪浮云端。','林表明霁色，城中增暮寒。'],
                translation:['终南山的北面山色秀美，山上的皑皑白雪好似与天上的浮云相连。','雪后初晴，林梢之间闪烁着夕阳余晖，傍晚时分，城中又添了几分积寒。'],
                tag:['儿童','唐诗三百']
              },
           ],
           nowPage:1,
           pageSize:10,
           pageCount:10,
           pageTotal:10,
        }
      },
      methods:{
        pageChange(index){//点击页数跳转-分页
          //  console.log(index)
        },
        deleteRow(index, rows) {
          rows.splice(index, 1);
        },
      }
    }
</script>

<style scoped>
   .creatBox{
     width: 100%;
     overflow: hidden;
   }
</style>